// 此文件为底部导航栏配置文件

import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Icon from 'react-native-vector-icons/FontAwesome'

import Home from '../pages/Home/Home';
import Mine from '../pages/Mine/Mine';
import History from '../pages/History/History';
import Classify from '../pages/Classify/Classify';

import {pxPage} from '../common/Common'

import {defaultColor} from '../common/Common'

const Tab = createBottomTabNavigator({
    Home: {
        screen: Home,
        navigationOptions: {
            tabBarLabel: '首页',
            tabBarIcon: ({ tintColor, focused }) =>
            (
                <Icon
                    name="home"
                    size={28}
                    style={{ color: tintColor }}
                />
            ),
        }
    },
    Classify: {
        screen: Classify,
        navigationOptions: {
            tabBarLabel: '分类',
            tabBarIcon: ({ tintColor }) => (
                <Icon name="diamond" size={22}
                    style={{ color: tintColor }}
                />
            )
        }
    },
    History: {
        screen: History,
        navigationOptions: {
            tabBarLabel: '追剧',
            tabBarIcon: ({ tintColor }) => (
                <Icon name="book" size={25}
                    style={{ color: tintColor }}
                />
            )
        }
    },
    Mine: {
        screen: Mine,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({ tintColor }) => (
                <Icon name="user-circle" size={25}
                    style={{ color: tintColor }}
                />
            )
        }
    },
}, {
    // 底部导航栏配置
    tabBarOptions: {
        activeTintColor: defaultColor,
        inactiveTintColor: "#808080",
        showIcon: true,
        showLabel: true,
        upperCaseLabel: false,
        pressColor: "#808080",
        style: {
            backgroundColor: "#fff",
            height: pxPage(72)
        },
        labelStyle: {
            fontSize: 12,
        },
        indicatorStyle: {
            height: 0
        },
    },
    tabBarPosition: "bottom",
    swipeEnabled: true,
    scrollEndabled: true,
    animationEnabled: true,
    lazy: true,
    backBehavior: "initialRoute",
});

const TabBar = createAppContainer(Tab);

export default TabBar;